   <template>
   	<!--//本页 用到components里面的三个组件-->
   	<!--单场比赛详情-->
	<div >
		<div><span  class="cl-Gray">当前位置 : 球队表现 /</span><span class="cl-Gred">赛况</span></div>
		<div class="panel-data">
			<img src="../assets/team_header.png"/>
			<div class="home-court">
				<b><span>主场</span></b>
	
				<img width="100" :src="initImg" alt="" />
		
				<div class="cl-main school ">光谷第二小学足球队</div>
				<div class="home-score">
						<div>
						<h2>1</h2>
						<span class="cl-main">红牌</span>
					</div>
					
					<div>
						<h2>1</h2>
						<span class="cl-main">黄牌</span>
					</div>
					
				
					<div>
						<h2>45%</h2>
						<span class="cl-main">控球率</span>
					</div>
					
				</div>
			</div>
			<div class="score-show">
				<h5 class="cl-white">2017-12-18  13:50 </h5>
				<h1 class="ft-size64">
					<span>4</span> <span>:</span>  <span>1</span>
				</h1>
				<div class="control-ball">
					<div class="control-ball-red" :style="{'width': info.red.possession+'%'}" ></div>
				</div>
				<span class="cl-main" >控球占比</span>
				
			</div>
			<div class="visitor-court">
				<b><span>客场</span></b>
	
				<img width="100" :src="initImg" alt="" />
		
				<div class="cl-main school ">光谷第二小学足球队</div>
				<div class="home-score">
					
				
					<div>
						<h2>55%</h2>
						<span class="cl-main">控球率</span>
					</div>
					<div>
						<h2>1</h2>
						<span class="cl-main">黄牌</span>
					</div>
					<div>
						<h2>1</h2>
						<span class="cl-main">红牌</span>
					</div>
					
					
					
					
				</div>
			</div>
			
		</div>
		 
		<div class="video">
			<span>精彩集锦</span>
			<video controls="controls"  :poster="initImg">
			<source src="" type="video/mp4"></source>
			<source src="myvideo.ogv" type="video/ogg"></source>
			<source src="myvideo.webm" type="video/webm"></source>
			<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
				<param name="movie" value="myvideo.swf" />
				<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
			</object>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
			</video>
		</div>
		<div class="view-content">
			<div class="view-left">
				
				<h3 class="column-heading">比赛数据</h3>
				<game-data></game-data>
				
				<h3 class="column-heading"> 首发阵容</h3>
				<start-line></start-line>
				
				<h3 class="column-heading">赛事事件 </h3>
				<competition-events></competition-events>
				
			</div>
			
			<div class="view-right">
				<h3 class="column-heading">射手榜</h3>
				<div class="top-scorer">
					<tr>
						<th>排名</th>
						<th>姓名</th>
						<th>学校</th>
						<th>进球数</th>
					</tr>
					<li v-for="person  in topScorer">
						<span v-if=" person.ranking>3 " >{{person.ranking}}</span>
						<img src="../assets/jinpai.png" v-if="person.ranking==1" />
						<img src="../assets/yinpai.png" v-if="person.ranking==2" />
						<img src="../assets/tongpai.png" v-if="person.ranking==3"/>
						<span > 
							<img width="30" class="nameImg" :src="person.photo"/>
							<span >{{person.name}}</span>	
						</span>

						<span class="person-school">{{person.school}}</span>
						<span class="">{{person.goals}}</span>
					</li>
					
				</div>
				<h3 class="column-heading">跑动距离</h3>
				<div class="run-distance">
					<tr>
						<th>排名</th>
						<th>姓名</th>
						<th>学校</th>
						<th>跑动距离</th>
					</tr>
					<li v-for="person  in runDistance">
						<span v-if=" person.ranking>3 " >{{person.ranking}}</span>
						<img src="../assets/jinpai.png" v-if="person.ranking==1" />
						<img src="../assets/yinpai.png" v-if="person.ranking==2" />
						<img src="../assets/tongpai.png" v-if="person.ranking==3"/>
						<span > 
							<img width="30" class="nameImg" :src="person.photo"/>
							<span >{{person.name}}</span>	
						</span>

						<span>{{person.school}}</span>
						<span class="">{{person.goals}}m</span>
					</li>
				</div>
				<h3 class="column-heading">最快速度</h3>
				<div class="fastest-speed">
					<tr>
						<th>排名</th>
						<th>姓名</th>
						<th>学校</th>
						<th>最快速度</th>
					</tr>
					<li  v-for="person  in fastestSpeed">
						<span v-if=" person.ranking>3 " >{{person.ranking}}</span>
						<img src="../assets/jinpai.png" v-if="person.ranking==1" />
						<img src="../assets/yinpai.png" v-if="person.ranking==2" />
						<img src="../assets/tongpai.png" v-if="person.ranking==3"/>
						<span > 
							<img width="30" class="nameImg" :src="person.photo"/>
							<span >{{person.name}}</span>	
						</span>

						<span>{{person.school}}</span>
						<span class="">{{person.goals}}m/s</span>
					</li>
				</div>
			</div>
		</div>
		
		$route.params.id    :    {{$route.params}}
	</div>
</template>
<script type="text/javascript">
	import gameData from "@/components/gameData.vue"
	import startLine from "@/components/startLine"
	import competitionEvents from "@/components/competitionEvents"
	
	export default{
		name:'EventDetails',
		props:{
			navActive:String,
			addrNav:Boolean
		},
		mounted:function(){
			this.$emit('ch-nav-active',this.navTarget);	
			this.getData()
			
		},
		methods:{
			getData:function(){
				this.$axios.post(
					this.dataUrl,
					{	
						leagueId:"a1206801-bb2a-48bf-8b26-0d6e7d3ae6a0",
						matchId:"00b348ed-4644-46d5-9950-25a6967ae39c"

					}
				).then(
					res=>{
						console.log(res)
					}
				).catch(
					err=>{
						console.log(err)
					}
				)
			}
		},
		data(){
			return{
				dataUrl:'http://101.37.33.145:3100/weixin/getMatchView.do',
				navTarget:'TeamPerformance',
				
				info:{
					red:{
						possession:"48",
						color:'green'
					}
				},
				
				topScorer:[{
					ranking:1,
					name:"马云",
					photo:require("../assets/vue.png"),
					school:"光谷第二小学",
					goals:8
				},
				{
					ranking:2,
					name:"王健林",
					photo:require("../assets/vue.png"),
					school:"光谷第二小学",
					goals:8	
				},
				{
					ranking:3,
					name:"马化腾",
					photo:require("../assets/vue.png"),
				
					school:"光谷第二小学",
					goals:8	
				},
				{
					ranking:4,
					name:"刘强东",
					photo:require("../assets/vue.png"),
					
					school:"光谷第二小学",
					goals:3
				},
				{
					ranking:5,
					name:"刘强东",
					photo:require("../assets/vue.png"),
					
					school:"光谷第二小学",
					goals:3
				}],
				fastestSpeed:[{
					ranking:1,
					name:"李彦宏",
					photo:require("../assets/vue.png"),
					school:"光谷第二小学",
					goals:34.5
				},
				{
					ranking:2,
					name:"李嘉诚",
					photo:require("../assets/vue.png"),
					school:"光谷第二小学",
					goals:19.3
				},
				{
					ranking:3,
					name:"董明珠",
					photo:require("../assets/vue.png"),
				
					school:"光谷第二小学",
					goals:19.2
				},
				{
					ranking:4,
					name:"雷军",
					photo:require("../assets/vue.png"),
					
					school:"光谷第二小学",
					goals:15.4	
				},
				{
					ranking:5,
					name:"雷军",
					photo:require("../assets/vue.png"),
					
					school:"光谷第二小学",
					goals:15.4	
				}],
				runDistance:[{
					ranking:1,
					name:"罗宇浩",
					photo:require("../assets/vue.png"),
					school:"光谷第二小学",
					goals:56789
				},
				{
					ranking:2,
					name:"任正非",
					photo:require("../assets/vue.png"),
					school:"光谷第二小学",
					goals:34134
				},
				{
					ranking:3,
					name:"孙正义",
					photo:require("../assets/vue.png"),
					school:"光谷第二小学",
					goals:22222
				},{
					ranking:4,
					name:"张三",
					photo:require("../assets/vue.png"),
					
					school:"光谷第二小学",
					goals:72828	
				},
				{
					ranking:5,
					name:"张三",
					photo:require("../assets/vue.png"),
					
					school:"光谷第二小学",
					goals:72828	
				}]
			}
		},
		components:{
			gameData,
			startLine,
			competitionEvents
		},
		directive:{
			bgImg:{
				inserted:function(el,binding){
					alert(111);
//					el.background= 'url('+binding.value+') no-repeat';
//					el.innerHTML= binding.value
				}
			}
		}
	}
</script>
<style scoped="scoped">
	.video{
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: 500px;
		margin:  auto;
		margin-top:30px ;
		padding: 10px;
		background-color: black
	}
	.video>span{
		position: absolute;
		color: white;
	}
	video{
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	img{
		vertical-align: middle;
	}
	.nameImg{
		margin-bottom: 5px;
	}
	tr{
		display: flex;
		justify-content: space-between;
		padding: 0 12px;
		line-height: 30px;
		font-size: 14px;
		color: white;
		background-color: #479ea2;
	}
	th:nth-of-type(2){
		margin-left: -30px;
	}
	th:nth-of-type(3){
		margin-left: -10px;
	}
	li{
		list-style: none;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		line-height: 50px;
		border: 2px solid #dcdcdc;
		border-top:none ;
		font-size: 13px;
	}
	li:nth-of-type(2n){
		background-color: #F2F2F2;
	}
	li>*:first-child{
		width: 25px;
	}
	li>span:nth-child(2){
		width:25% ;
		text-align: left;
	}
	.person-school{
		width: 35%;
		text-align: left;
	}
	li>span:last-of-type{
		width: 14%;
		text-align: center;
	}
	.column-heading{
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 42px;
			line-height: 42px;
			margin-bottom: 20px;
			margin-top: 30px;
			overflow: hidden;
			text-indent: 1em;
			font-weight: 400;
			font-size: 16px;
			border-bottom:5px solid #77c2c3;
			border-top-left-radius: 5px;
		}
		.column-heading:before{
			content: "";
			position: absolute;
			z-index:-1;
			top: 0px;
			left: -1em;
			width: 126px;
			height: 42px;
			background-color: #77C2C3;
			border-top-right-radius: 10px;
		}
		.column-heading:after{
			content: '';
			position:absolute ;
			top: 3.5px;
			left: calc(123px - 1em );
			border-left:35px solid  #77C2C3;
			border-top:38px solid transparent;
			/*border-right:34px solid aquamarine;*/
		}
	.ft-size64{
		display: flex;
		justify-content: space-around;
		margin-top:0px ;
		font-size: 44px;
	}
	.cl-main{
		color: #77C2C3;
	}
	.cl-Gred{
		display: inline-block;
		color: #E65B00;
		margin-bottom: 30px;
	}
	.cl-Gray{
		color: #666666;
	}
	.panel-data{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 280px;
		text-align: center;
		background: linear-gradient(to right,#07252e 0%,#0E4455);
	}
	.panel-data>div{
		width: 33%;
	}
	.panel-data>img{
		position: absolute;
		top: -18px;
		left: calc(50% - 300px);
		width: 600px;
	}
	.home-court,.visitor-court{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
	}
	.home-court>img,.visitor-court>img{
		margin-top:-20px;
		margin-bottom: 20px;
	}
	.home-court>b{
		position: absolute;
		left: -72px;
		top: -72px;
		width: 0px;
		height: 0px;
		color: white;
		border: 70px solid transparent;
		border-top: 70px solid #FF6600;
		transform: rotate(135deg);	
	}
	.visitor-court>b{
		position: absolute;
		right: -72px;
		top: -72px;
		width: 0px;
		height: 0px;
		color: white;
		border: 70px solid transparent;
		border-top: 70px solid #0066CC;
		transform: rotate(-135deg);	
	}
	
	.home-court>b>span{
		position: absolute;
		left: -30px;
		top: -60px;
		width: 50px;
		font-size: 14px;
		transform: rotate(-135deg);
	}
	.visitor-court>b>span{
		position: absolute;
		right: -30px;
		top: -60px;
		width: 50px;
		font-size: 14px;
		transform: rotate(135deg);
	}
	.home-score{
		display: flex;
		justify-content: space-around;
		width: 80%;
	}
	.score-show{
		position: relative;
		z-index: 3;
		top: -30px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		height: 100%;
		color: white;
	}
	.control-ball{
		
		width: 100%;
		height: 20px;
		margin-top:60px ;
		background-color: #0066CC;
	}
	.control-ball-red{
	
		height: 100%;
		
		background-color: #E65B00;
	}
	.view-content{
		display: flex;
		justify-content: space-between;
		width: 100%;
		
	}
	.view-left{
		
		width: 70%;
	}
	.view-right{
		
		width:calc( 30% - 30px);
		margin-left: 30px;
	}
</style>